<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>loading测试效果</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/loading.css">

</head>
<style>
	body,html{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.div-btn{
		width: 100%;
		max-width: 560px;
		/*margin:200px auto; */
	}

	.div-btn div{
		margin: 10px 0 ;
	}

	.test-div{
		width: 300px;
		height: 300px;
		margin:20px auto;
		border: 1px solid #aaa;
		position: relative;
	}
</style>

<body>
	<div class="div-btn">
		<div class="dw-btn btn-success" onclick="loading1()">默认效果</div>
		<div class="dw-btn btn-warning" onclick="loading8()">纵向文字颜色</div>
		<div class="dw-btn btn-primary" onclick="loading2()">纵向效果无title</div>
		<div class="dw-btn btn-danger" onclick="loading3()">纵向效果无title描述</div>
		<div class="dw-btn btn-warning " onclick="loading4()">其他背景色</div>
		<div class="dw-btn btn-success" onclick="loading5()">纵向图片效果</div>
		<div class="dw-btn btn-primary" onclick="loading6()">横向图片效果</div>
		<div class="dw-btn btn-danger" onclick="loading7()">横向进度效果,字体颜色</div>
		<div class="dw-btn btn-warning" onclick="loading10()">无过渡效果</div>
	</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/loading.js"></script>
<script>
	function loading1() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'描述描述描述描述',
			direction:'column',
			type:'origin',
			// originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingMaskBg:'rgba(0,0,0,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading2() {
		$('body').loading({
			loadingWidth:240,
			title:'',
			name:'test',
			discription:'描述描述描述描述',
			direction:'column',
			type:'origin',
			// originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingMaskBg:'rgba(0,0,0,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading3() {
		$('body').loading({
			loadingWidth:120,
			title:'',
			name:'test',
			discription:'',
			direction:'column',
			type:'origin',
			// originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingMaskBg:'rgba(0,0,0,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading4() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'column',
			type:'origin',
			originBg:'#71EA71',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'#389A81',
			loadingMaskBg:'rgba(123,122,222,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading5() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'column',
			type:'pic',
			originBg:'#71EA71',
			originDivWidth:60,
			originDivHeight:60,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'#389A81',
			loadingMaskBg:'rgba(123,122,222,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading6() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'row',
			type:'pic',
			originBg:'#71EA71',
			originDivWidth:60,
			originDivHeight:60,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'rgba(20,125,148,0.8)',
			loadingMaskBg:'rgba(123,122,222,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading7() {
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			discription:'这是一个描述...',
			direction:'row',
			type:'origin',
			originBg:'#71EA71',
			originDivWidth:30,
			originDivHeight:30,
			originWidth:4,
			originHeight:4,
			smallLoading:false,
			titleColor:'#388E7A',
			loadingBg:'#312923',
			loadingMaskBg:'rgba(22,22,22,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading8(){
		$('body').loading({
			loadingWidth:220,
			title:'提示',
			name:'test',
			titleColor:'#fff',
			discColor:'#EDEEE9',
			discription:'颜色搭配,我不太懂',
			direction:'column',
			type:'origin',
			originBg:'#ECCFBB',
			originDivWidth:40,
			originDivHeight:40,
			originWidth:6,
			originHeight:6,
			smallLoading:false,
			loadingBg:'rgba(56,43,14,0.8)',
			loadingMaskBg:'rgba(66,66,66,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}

	function loading10(){
		$('body').loading({
			loadingWidth:240,
			title:'请稍等!',
			name:'test',
			animateIn:'none',
			discription:'这是一个描述...',
			direction:'row',
			type:'origin',
			mustRelative:true,
			originBg:'#71EA71',
			originDivWidth:30,
			originDivHeight:30,
			originWidth:4,
			originHeight:4,
			smallLoading:false,
			titleColor:'#388E7A',
			loadingBg:'#312923',
			loadingMaskBg:'rgba(22,22,22,0.2)'
		});

		setTimeout(function(){
			removeLoading('test');
		},3000);
	}
</script>
</html>